{#
  Card!
  element: String (optional): Element tag that defaults to article.
  image: Object:
  Headline_element: String: String (optional): Headline element tag that defaults to div.
  headline: String: The headline on the card.
  preheadline: String: The preheadline on the card.
  text: String: The text on the card.
  alignment: center
#}
{# Defaults: #}
{% set element = element|default('div') %}
{% set headline__element = headline__element|default('h2') %}
{% if url is not empty %}
  {% set attributes = attributes.setAttribute('href', url) %}
  {% set element = 'a' %}
{% endif %}

<{{ element }} {{ attributes|default(create_attribute()).addClass([
  alignment == 'center'?'text-center': '',
  variant == 'default' ? 'block',
  'group hover:no-underline',
] | sort | join(' ') | trim) }}>
  {#start of image div of the card#}
  <div class="{{ image_classes }}">
    {% block image %}
      {{ image }}
    {% endblock %}
  </div>
  {#content-wrapper div of the card#}
  <div {{ attributes|default(create_attribute()).addClass([
  ] | sort | join(' ') | trim) }}>
    {#start of pre-headline div of the card#}
    {% if preheadline is not empty %}
      <div {{ attributes|default(create_attribute()).addClass([
        'font-serif', 'text-4xl', 'text-blue', 'group-hover:underline',
      ] | sort | join(' ') | trim) }}>
        {% block preheadline %}
          {{ preheadline }}
        {% endblock %}
      </div>
    {% endif %}
    {#end pre-headline of div#}

    {#start of headline div of the card#}
    <{{ headline__element }} {{ attributes|default(create_attribute()).addClass([
      'text-base', 'mb-1', 'uppercase', 'text-gray-light', 'font-sans',
    ] | sort | join(' ') | trim) }}>
      {% block headline %}
        {{ headline }}
      {% endblock %}
    </{{ headline__element }}>
    {#end headline of div#}

    {#start of text div of the card#}
    {% if text is not empty %}
      <div {{ attributes|default(create_attribute()).addClass([
        'text-base', 'mb-10', 'text-gray-dark', 'font-sans',
      ] | sort | join(' ') | trim) }}">
        {% block text %}
          {{ text }}
        {% endblock %}
      </div>
    {% endif %}
    {#end of text div#}

    {#start of button div of the card#}
    {% if button is not empty %}
      {% include '@atoms/button/button.twig' with {variant: 'primary', content: button} %}
    {% endif %}
    {#end of button div#}

    {#start of icon div of the card#}
    {% if icon is not empty %}
      {% for icon in icons %}
        {% include "@atoms/svg/_svg--icon.twig" with {
          size: 'w-6 h-6',
          icon: icon
        } %}
      {% endfor %}
    {% endif %}
    {#end of icon div#}
  </div>
  {#end of content-wrapper div#}
</{{ element }}>
